<template>
  <div class="App-Page">
    <div :style="{'background-color':color}">当前颜色：{{ color }}</div>
    <div class="py-2">
      <ju-color color="#455A64"
                v-model="color"></ju-color>
      <ju-color color="#A9D9D2"
                v-model="color"></ju-color>
      <ju-color color="rgb(169,217,210)"
                v-model="color"></ju-color>
    </div>
    <div class=" position-absolute"
         style="left: 50%;top:50%;">
      <el-button type="primary"
                 @contextmenu.native.stop.prevent="showContextMenu">按钮</el-button>
    </div>
  </div>
</template>

<script lang="ts">
  import { Component, Vue } from "@some21/vue-class-decorator";
  import JuContextMenu from "@/components/JuContextMenu";

  @Component({
    name: "App-Page",
    components: {
      JuColor: () => import("@/components/JuColor.vue"),
    },
  })
  export default class extends Vue {
    color = "";

    showContextMenu(e) {
      console.log("x", e.x, "y", e.y);
      debugger;

      JuContextMenu.show({
        left: e.x,
        top: e.y,
        menuItems: [
          {
            text: "菜单一",
          },
          {
            text: "菜单2",
          },
          {
            text: "菜单三",
          },
        ],
      });
    }
  }
</script>

<style lang="scss" scoped>
</style>
